<!--
*@Author: zt
*@Description: 文件夹的明细
*@Date: 2024-08-22
-->
<template>
  <u-dialog
    v-bind="$attrs"
    title="文件详细"
    :hideBtns="['submit']"
    wrap-class-name="full-modal"
  >
    <a-layout class="f-h-100">
      <u-search-header style="height: auto; padding: 6px">
        <a-form
          :model="searchF"
          :inline="true"
          class="f-search-tool-200"
          style="--width: 220px"
          label-width="80px"
          layout="horizontal"
        >
          <a-form-item label="标题">
            <u-input
              v-model:value="searchF.model.keywords"
              placeholder="标题"
              @enter="getSearch()"
            />
          </a-form-item>
          <a-row :gutter="16">
            <a-col>
              <u-icon-button itype="search" @click="getSearch()">
                查询
              </u-icon-button>
            </a-col>
            <a-col>
              <u-icon-button
                itype="search"
                @click="addEdit"
                v-if="
                  userInfo['extra']['roles']['1'] &&
                  userInfo['extra']['roles']['1'].length > 0
                "
              >
                新增
              </u-icon-button>
            </a-col>
            <a-col>
              <u-icon-button
                itype="delete"
                @click="deleteBtn()"
                v-if="
                  userInfo['extra']['roles']['1'] &&
                  userInfo['extra']['roles']['1'].length > 0
                "
              >
                删除
              </u-icon-button>
            </a-col>
          </a-row>
        </a-form>
      </u-search-header>

      <a-layout-content class="s-bg-white" style="overflow: auto">
        <u-table
          :columns="columns"
          :data="tabData"
          :scroll="{ y: 'calc(100vh - 40vh)' }"
          :pagenation="pagenation"
          @onSelect="
            ({ selectedRows }) =>
              tabSelData.splice(0, tabSelData.length, ...selectedRows)
          "
          @change="getSearch()"
        ></u-table>
      </a-layout-content>
    </a-layout>
  </u-dialog>

  <AddEdit
    v-model:open="showAddEdit"
    :title="addAddEditTitle"
    :fkfloderid="$attrs.keyid"
    @success="(showAddEdit = false), getSearch()"
  />
</template>

<script lang="ts" setup>
import { ref, reactive, computed, onMounted, h, watch, useAttrs } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { _IFormEl, _IExtra } from '@/src/components/common/form/interface';
import {
  FormInstance,
  FormItemProps,
  Button,
  Space,
  Image,
} from 'ant-design-vue';
import {
  HomeOutlined,
  FileTextOutlined,
  UploadOutlined,
} from '@ant-design/icons-vue';
import { TreeProps } from 'ant-design-vue/es/vc-tree';
import { ColumnProps } from 'ant-design-vue/es/table';
import { _IColumnProps } from '@/components/common/tableEdit/interface.ts';
import { fileCols } from '@/common/model/fileCols';
import { urlFile } from '@/util/common';
import { storeToRefs } from 'pinia';
import { useLoginStore } from '@/store';
import { useTableScroll } from '@/hooks/useTable';
import { alertC } from '@/util/common';
import AddEdit from './AddEdit.vue';
import dayjs from 'dayjs';
import UIconFont from '@/components/common/iconfont/IconFont.vue';
import * as docApi from '@/service/assist/doc';
import * as docDtailApi from '@/service/assist/docDetail';
const route = useRoute();
const router = useRouter();
const { userInfo } = storeToRefs(useLoginStore());
const attrs = useAttrs();
let titleHear = ref([]);
const showAddEdit = ref(false);
const addAddEditTitle = ref(`新增${attrs.title}`);
const tabSelData = ref([]);
const emits = defineEmits(['submit', 'close']);
let pagenation = reactive({
  total: 0,
  current: 1,
  pageSize: 50,
});
const searchF = reactive<any>({
  model: {
    fkfloderid: '',
    keywords: '',
  },
});
const fileType = {
  doc: 'word',
  docx: 'word',
  xls: 'excel',
  xlsx: 'excel',
  pdf: 'pdf',
  txt: 'txt',
  jpg: 'jpg',
  png: 'png',
  gif: 'gif',
  ppt: 'ppt',
};

// 列表
const tabData = reactive([]);
let columns = reactive([
  {
    dataIndex: 'index',
    title: '序号',
    width: 60,
    align: 'center',
    customRender: ({ text, record, index }) => {
      return index + 1;
    },
  },
  {
    dataIndex: 'docname',
    title: '标题',
    minWidth: 100,
    customRender: ({ text, record }) => {
      let sffix = text.split('.');
      return h(Space, [
        h(Image, {
          src: urlFile(`knowledge/${fileType[sffix[sffix.length - 1]]}.png`),
          width: 20,
          preview: false,
        }),
        h(
          Button,
          {
            type: 'link',
            onClick: () => {
              Preview(record.filepath);
            },
            style: { padding: '4px 0' },
          },
          text
        ),
      ]);
    },
  },
  {
    dataIndex: 'type',
    title: '类型',
    width: 150,
    align: 'center',
  },
  {
    dataIndex: 'updatetime',
    title: '上传时间',
    width: 150,
    align: 'center',
    customRender: ({}) => {
      return dayjs().format('YYYY-MM-DD');
    },
  },
  {
    dataIndex: 'do',
    title: '操作',
    width: 150,
    align: 'center',
    customRender: ({ text, record }) => {
      return h(
        Space,
        { size: 40, style: { fontSize: '16px', color: '#1890ff' } },
        [
          //   h(UIconFont, { type: 'icon-songshen' ,onClick: () => {

          //       Preview(record.filepath)

          // }}),
          h(UIconFont, {
            type: 'icon-a-lujing12',
            onClick: () => {
              download(record.filepath);
            },
          }),
          h(UIconFont, {
            type: 'icon-a-shanchu1',
            onClick: () => {
              if (
                userInfo.value['extra']['roles']['1'] &&
                userInfo.value['extra']['roles']['1'].length > 0
              ) {
                deleteBtn(record.keyid);
              }
            },
          }),
        ]
      );
    },
  },
]);

// 文件预览
const Preview = (fileName: string) => {
  // 新窗口打开路由的方式
  let router1 = router.resolve({
    path: '/FileEcho',
    query: {
      fileName:
        'http://127.0.0.1/file/DOC_BIZ_TYPE_POLICY/操作规程/3邮件快件处理场所、营业场所安全管理二十条细则.doc',
    },
  });
  window.open(router1.href, '_blank');
};
//文件下载
const download = (fileName: string) => {
  // 新窗口打开路由的方式
  // let router1 =router.resolve({path:'/FileEcho',query:{fileName}})
  window.open(fileName, '_blank');
};

// 新增
const addEdit = () => {
  showAddEdit.value = true;
};

// 搜索
const getSearch = async (index?) => {
  if (index == 1) {
    pagenation.current = 1;
  }
  searchF.size = pagenation.pageSize;
  searchF.current = pagenation.current;
  await docDtailApi.page(searchF).then(res => {
    if (res.code == 0) {
      let tdata = res.data.records;
      tdata.map(e => {
        if (e.docname) {
          e['type'] = e.docname.split('.')[e.docname.split('.').length - 1];
        }
      });
      tabData.splice(0, tabData.length, ...tdata);
    }
  });

  // searchF.size = pagenation.pageSize;
  // searchF.current = pagenation.current;
  // searchF.model.fkfloderid = props.id;
  // searchF.model.keyWords = null;
  // docApi.detailPage(searchF).then(res => {
  // })
};

//面包屑请求
const breadcrumbClick = (value: string) => {
  if (!value) {
    emits('close');
    return;
  }
};

// 删除功能
const deleteBtn = async (keyid?: string) => {
  let ids = [];
  if (keyid) {
    ids.push(keyid);
  } else {
    if (tabSelData.value.length == 0) {
      alertC('请先选择要删除的数据！');
      return;
    }
    tabSelData.value.map(item => ids.push(item.keyid));
  }
  const res = await docApi.delEdit({ ids: ids.join(',') });
  if (res.code == 0) {
    alertC(res.msg, 'success');
    getSearch();
  } else {
    alertC(res.msg, 'warning');
  }
};

watch(
  () => attrs.open,
  async (nval, oval) => {
    if (nval == true) {
      titleHear.value.push({ title: attrs.title, value: '' });

      searchF.model.fkfloderid = attrs.keyid;
      await getSearch();
    }
  }
);
</script>

<style lang="scss"></style>
